<template>
    <!-- 外层容器，包含滚动视图 -->
    <view class="list-scroll-container">
        <!-- 给定了 scroll-y 属性以允许垂直滚动 -->
        <scroll-view scroll-y="true" class="list-scroll" @scrolltolower="loadmore">
            <!-- 列表项的容器，使用 v-for 循环渲染 ListCard 组件 -->
            <view>
				<!-- <view v-for="(item,index) in 50" :key="index">
					dfdfd对对对对对对的点点滴滴哒哒哒哒哒哒哒哒哒哒哒哒哒哒哒哒哒哒哒哒哒哒哒哒
				</view> -->
                <ListCard :item="item" v-for="(item) in articleList" :key="item._id"></ListCard>
            </view>
			
			<uni-load-more v-if="articleList.length===0||articleList.length>7" status="loadData.loading || 'loading'"></uni-load-more>
			
        </scroll-view>
		
		
    </view>
</template>

<script>
export default {
    name: "ListItem", // 组件名称
	props:{
		articleList:Array,
		
		loadData:{
			type:Object,
				
			default(){
					
				return{
					loading:'loading'
				}
			}
		}
	},
    data() {
        return {
            // 此处可以定义组件的本地数据
				
			itemList:[
				{mode:'base'},
				{mode:'column'},
				{mode:'image'},
				{mode:'base'}
			]
        };
    },methods:{
			
		loadmore(){
			this.$emit('loadMore')
		}
	}
}
</script>

<style lang="scss">
.list-scroll-container {
    height: 100%; // 设置容器高度为 100%.
	// overflow: auto; 
	.list-scroll {
    overflow: auto; // 隐藏溢出的内容
    height: 100%; // 设置滚动视图高度为 100%
    box-sizing: border-box; // 确保内边距和边框计算在高度内
	}
}


</style>
